<template>

	<view class="container">
		
		<uni-section title="左侧滑出" type="line">
			<view class="example-body">
				<button type="primary" @click="showDrawer('showLeft')"><text class="word-btn-white">显示Drawer</text>
				</button>
				<uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event,'showLeft')">
					<view class="close">
						<button @click="closeDrawer('showLeft')"><text class="word-btn-white">关闭Drawer</text></button>
					</view>
				</uni-drawer>
			</view>
		</uni-section>

		<uni-section title="提醒消息" type="line">
			<uni-card v-for="(item,index) in remind_hints" :title="'来自'+item.sender+'的消息'" :sub-title="item.create_time"
				:extra="item.status+'' == '2'?'已读':'未读'" :thumbnail="item.sender_profile_photo" @click="onClick">
				<view v-if="item.pure_link && item.pure_content">
					<navigator :url="item.pure_link"><text class="uni-body"
							style="color:deepskyblue;text-decoration: underline;">{{item.pure_content}}</text></navigator>
				</view>
				<view v-else>
					<text class="uni-body">{{item.content}}</text>
				</view>
			</uni-card>
			<uni-load-more iconType="auto" :status="status" />
		</uni-section>


		<view>
			<!-- {{remind_hints}} -->
			<br />
			<!-- {{remind_sysinfos}} -->
		</view>







	</view>




</template>

<script>
	import {
		apis,
		routes
	} from '@/common/paths.js'
	export default {
		data() {
			return {
				status: 'more',
				avatar: 'https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
				user_token: uni.getStorageSync('user_token'),
				remind_hints: [],
				remind_sysinfos: [],
				routes: routes,
				showRight: false,
				showLeft: false
			}
		},
		methods: {
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			},
			loadReminds() {
				uni.request({
					url: this.backendServer + apis['do_remind'],
					method: 'get',
					// dataType:'application/json',
					data: {
						'user_id': this.user_token
					},
					success: (res) => {
						uni.hideLoading()
						console.log('success res ', res)
						if(this.status=='loading'){
							// 触底刷新完成
							console.log('触底刷新完成')
							this.status='no-more'
						}
						if (res.data.status) {
							console.log('request ok')
							// console.log('res.data.results.hints ',res.data.results.hints)
							this.remind_hints = res.data.results.hints
							this.remind_sysinfos = res.data.results.sysinfos
						} else {
							uni.showToast({
								title: "获取失败，" + res.data.msg,
								icon: 'fail'
							})
							uni.switchTab({
								url: routes['dashboard']
							})
							// this.project_list = []
						}
					},
					fail: (res) => {
						uni.hideLoading()
						console.log('fail res ', res)
						uni.showToast({
							title: "获取失败，请检查网络联接，" + res,
							icon: 'fail'
						})
						uni.switchTab({
							url: routes['dashboard']
						})
						// this.project_list = []
					}
				})
			},
			onClick(e) {
				console.log(e)
			},
		},
		onNavigationBarButtonTap(e) {
			if (this.showLeft) {
				this.$refs.showLeft.close()
			} else {
				this.$refs.showLeft.open()
			}
		},
		// app端拦截返回事件 ，仅app端生效
		onBackPress() {
			if (this.showRight || this.showLeft) {
				this.$refs.showLeft.close()
				this.$refs.showRight.close()
				return true
			}
		},
		onLoad() {
			// if (!this.user_token) {
			// 	uni.redirectTo({
			// 		url: routes['login']
			// 	})
			// } else {
			uni.startPullDownRefresh({
				success() {},
				complete() {
					console.log('startPullDownRefresh complete');
				}
			})
			// }
		},
		onPullDownRefresh() {
			console.log('refresh');
			this.loadReminds()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			console.log('onReachBottom');
			this.status = 'loading'
			uni.startPullDownRefresh({
				success() {},
				complete() {
					console.log('startPullDownRefresh complete');
				}
			})
		}


	}
</script>

<style>
	.container {
		overflow: hidden;
	}
</style>